<template>
	<div class="global-container">
		<div class="lg-show hidden-sm-and-down">
			<el-table :data="data" v-loading="loading" class="global-table" :header-row-style="{background:'#FAFAFA'}"	 :style="{width:!isFullScreen?(tableW+'px'):'100%',margin:'0 auto'}" >
				<el-table-column
					align="center"
					type="index"
					:index="indexMethod"
					v-if="showNumber"
					label="编号"
					width="80"></el-table-column>
				<el-table-column
				v-for="item in headerData"
				:key="item.id"
				show-overflow-tooltip
				:label="item.label"
				:width="item.width||150">
					<template slot-scope="scope" >
						<slot :name="item.value" :row="scope.row" :index="scope.$index" v-if="item.isCustom"></slot>
						<div v-else-if="item.type === 'img'" class="image-container" :style="item.imgStyle">
							<div class="image-bg" :style="item.imgStyle" v-if="scope.row[item.value]" @click="viewImage(scope.row[item.value])">
								<span class="el-icon-view"></span>
							</div>
							<img :src="scope.row[item.value]||defaultHeadImg" alt=""  :style="item.imgStyle">
						</div>
						<span v-else>
							{{scope.row[item.value]||'空'}}
						</span>
					</template>
				</el-table-column>
				<el-table-column align="center" v-if="showOperate" label="操作" :min-width="operateW">
					<template #default="scope">
						<slot name="operate" :row="scope.row" :index="scope.$index"></slot>
					</template>
				</el-table-column>
			</el-table>
			
		</div>
		<div class="xm-show hidden-sm-and-up">
			<el-card shadow="always" v-loading="loading" :body-style="{ padding: '20px' }" style="margin-bottom: 10px;" v-for="(item,index) in data" :key="item.id">
				<!-- card body -->
				<div class="sn-flex sn-col-start card-item" v-for="child in headerData" :key="child.id">
					<p class="card-title">{{ child.label }}</p>
					<slot :name="child.value" :row="item" v-if="child.isCustom"></slot>
					<img :src="data[index][child.value]||defaultHeadImg" alt="" v-else-if="child.type === 'img'" :style="child.imgStyle">
					<p class="card-text" v-else>{{ data[index][child.value] || '空'}}</p>
				</div>
				<div style="text-align: center;margin-top: 10px;" v-if="showOperate">
						<slot name="operate" :row="item"></slot>
				</div>
			</el-card>
		</div>
		<el-dialog
		:visible.sync="dialogVisible"
		class="sn-default-dialog"
		width="500px"
		>
		<div class="sn-title" slot="title">图片预览</div>
		<img :src="imageUrl" alt="" style="width: 100%;">
		</el-dialog>
	</div>
</template>

<script>
export default {
	data(){
		return {
			dialogVisible:false,
			imageUrl:'',
		}
	},
	computed:{
		tableW(){
			let w = 0;
			if(!this.isFullScreen){
				this.headerData.forEach(item=>{
					if(item.width){
						w+=item.width;
					}else{
						w+=150
					}
				});
				if(this.showNumber){
					w+=80
				}
				if(this.showOperate){
					w+=this.operateW;
				}
			}
			return w;
		}
	},
	props:{
		showNumber:{
			type:Boolean,
			default:true
		},
		showOperate:{
			type:Boolean,
			default:true
		},
		operateW:{
			type:Number,
			default:200
		},
		data:{
			type:Array,
			default:()=>{
				return []
			}
		},
		headerData:{
			type:Array,
			default:()=>{
				return []
			}
		},
		pageIndex:{
			type:Number,
			default:1
		},
		pageSize:{
			type:Number,
			default:10
		},
		isFullScreen:{
			type:Boolean,
			default:true
		},
		loading:{
			type:Boolean,
			default:false
		},
	},
	methods:{
		 //表格编号设置
		 indexMethod(index){
			if(this.pageIndex === 1){
				return index+1;
			}else{
				return index+this.pageSize*(this.pageIndex-1)+1
			}
		},
		viewImage(image){
			this.imageUrl = image;
			this.dialogVisible = true;
		}
	}
};
</script>
<style lang="scss">
	.global-table{
		min-height: 300px;
		&::before{
			height: 0;
		}
		.el-table__header-wrapper{
			background-color: #ccc;
			thead{
				th{
					background-color: transparent;
				}
			}
			
		}
		.el-table__body-wrapper{
			border-right: 1px solid #EBEEF5;
				border-left: 1px solid #EBEEF5;
		}
		
	}
</style>
<style lang="scss" scoped>
	.xm-show{
		.card-item{
			overflow: hidden;
			position: relative;
			>p{
				margin: 6px 0;
			}
			>img{
				border-radius: 50%;
			}
			.card-title{
				color: #999;
				margin-right: 10px;
				overflow: hidden;
			}
			.card-text{
				flex:1;overflow: hidden;
			}
		}
	}
	.image-container{
		position: relative;
		.image-bg{
			width: 100%;
			height: 100%;
			transition: all .5s;
			display: none;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			color: #fff;
			background-color: rgba(0,0,0,.5);
		}
		&:hover{
			cursor: pointer;
			.image-bg{
				display: flex;
			}
		}
	}
</style>